<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发布课程-[[${session.admin.name}]]的后台管理</title>
    <meta name="description" content="Free Bootstrap 4 Admin Theme | Pike Admin">
    <!-- Favicon -->
    <link rel="shortcut icon" href="background/images/favicon.ico">
    <!-- Switchery css -->
    <link href="background/plugins/switchery/switchery.min.css" rel="stylesheet" />
    <!-- Bootstrap CSS -->
    <link href="background/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- Font Awesome CSS -->
    <link href="background/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Custom CSS -->
    <link href="background/css/style.css" rel="stylesheet" type="text/css" />
    <!-- BEGIN CSS for this page -->
    <link rel="stylesheet" type="text/css" href="common/css/dataTables.bootstrap4.min.css"/>
    <link rel="stylesheet" href="background/EditorMD/lib/codemirror/codemirror.min.css">
    <link rel="stylesheet" href="background/EditorMD/css/editormd.css">
    <link rel="stylesheet" href="common/tagsinput/jquery-tagsinput.min.css">
    <style>
        .tag{
            color: white;
        }
    </style>
    <!-- END CSS for this page -->
</head>
<body class="adminbody">
<div id="main">
    <!-- top bar navigation -->
    <div th:replace="common/adminBar::#top"></div>
    <!-- End Navigation -->


    <!-- Left Sidebar -->
    <div th:replace="common/adminBar::#sidebar(currUri='courses')"></div>
    <!-- End Sidebar -->

    <div class="content-page">

        <!-- Start content -->
        <div class="content">

            <div class="container-fluid">

                <div class="row">
                    <div class="col-xl-12">
                        <div class="breadcrumb-holder">
                            <h1 class="main-title float-left">
                                <i class="fa fa-pencil bigfonts"></i> 开始你的创作 &ensp;
                            </h1>

                            <ol class="breadcrumb float-right">
                                <li class="breadcrumb-item">课程详情管理</li>
                                <li class="breadcrumb-item active">发布新课程</li>
                            </ol>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>
                <!-- end row -->

                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group row" style="padding: 0px 10px">
                            <input type="text" class="form-control col-sm-12" id="title" autocomplete="off" placeholder="请输入课程标题">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group row" style="padding: 0px 10px">
                            <textarea class="form-control col-sm-12" id="info" maxlength="100" placeholder="课程简介会在课程外进行显示，帮助同学们快速了解内容"></textarea>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group row" style="padding: 0px 10px">
                            <input type="text" class="form-control col-sm-12" id="courseUrl" autocomplete="off" placeholder="请输入课程链接">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group row" style="padding: 0px 10px">
                            <input type="number" class="form-control col-sm-12" id="courseSections" autocomplete="off" placeholder="请输入课程节数">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group row" style="padding: 0px 10px">
                            <input type="text" class="form-control col-sm-12" id="courseTime" autocomplete="off" placeholder="请输入HH:MM:SS格式的时间">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="card mb-3">
                            <div class="card-header">
                                <h3>编辑课程的信息</h3>
                            </div>

                            <div class="card-body">
                                <div class="form-group">
                                    <label class="col-form-label"><span style="font-weight: bold">课程类别</span>
                                        <small class="form-text text-muted text-danger">你需要将此课程添加到已有的课程类别中</small>
                                    </label>
                                    <select class="form-control" id="type" onchange="changeCourseType()">
                                        <option value="0">请选择课程类别</option>
                                        <option th:each="courseType:${courseTypes}" th:value="${courseType.id}" th:text="${courseType.title}"></option>
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label class="col-form-label"><span style="font-weight: bold">课程阶段</span>
                                        <small class="form-text text-muted text-danger">你需要将此课程添加到已有的课程阶段中</small>
                                    </label>
                                    <select class="form-control" id="stage">
                                        <option value="0">请选择课程阶段</option>
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label class="col-form-label"><span style="font-weight: bold">课程排序</span>
                                        <small class="form-text text-muted text-danger">你需要为此课程添加到课程排序</small>
                                    </label>
                                    <div class="form-group row" style="padding: 0px 10px">
                                        <input type="number" class="form-control col-sm-12" id="sort" autocomplete="off" placeholder="请输入课程排序">
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer">
                                <button class="btn btn-success btn-sm" onclick="publish()"><i class="fa fa-send"></i> 发布课程</button>
                                <button class="btn btn-primary btn-sm" onclick="draftPublish()"><i class="fa fa-save"></i> 保存到草稿箱</button>
                            </div>


                        </div><!-- end card-->
                    </div>
                </div>
            </div>
            <!-- END container-fluid -->

        </div>
        <!-- END content -->

    </div>
    <!-- END content-page -->

    <div th:replace="common/adminBar::#footer"></div>

</div>
<!-- END main -->

<script src="background/js/modernizr.min.js"></script>
<script src="background/js/jquery.min.js"></script>
<script src="background/js/moment.min.js"></script>

<script src="background/js/popper.min.js"></script>
<script src="background/js/bootstrap.min.js"></script>

<script src="background/js/detect.js"></script>
<script src="background/js/fastclick.js"></script>
<script src="background/js/jquery.blockUI.js"></script>
<script src="background/js/jquery.nicescroll.js"></script>
<script src="background/js/jquery.scrollTo.min.js"></script>
<script src="background/plugins/switchery/switchery.min.js"></script>

<!-- App js -->
<script src="background/js/pikeadmin.js"></script>

<!-- BEGIN Java Script for this page -->
<script src="common/tagsinput/jquery.color.plus-names.min.js"></script>
<script src="common/tagsinput/jquery-tagsinput.min.js" defer></script>
<script src="common/js/course.js"></script>
<script src="common/js/sweetalert.min.js"></script>
<script src="common/js/common.js"></script>
<script>
    $(document).ready(function () {
        $('[data-role="tags-input"]').tagsInput();
    });
</script>
</body>
</html>